<template>
	<view class="container">
		<!-- 导航栏 -->
		<uni-row>
			<uni-col :span="2"><uni-icons type="scan" size="30"></uni-icons></uni-col>
			<uni-col :span="20">
				<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search"
					style="position: relative; bottom: 15px;" />
			</uni-col>
			<uni-col :span="2"><uni-icons type="chat" size="30"></uni-icons></uni-col>
		</uni-row>
		<!-- 轮播图 -->
		<uni-row>
			<uni-col :span="24">
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<view class="swiper-item">
								{{item.content}}
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</uni-col>
		</uni-row>
		<!-- 九宫格 -->
		<!-- 商品卡片 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			open() {
				console.log("haha")
				this.$refs.calendar.open();
			},
			
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>